// import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';
// import { Badge, Button, Form, Input, Modal, Table } from 'antd';
// import { useEffect, useState } from 'react';
// import { useNavigate } from 'umi';
// import styles from './index.less';

// interface interConfigsProp {
//   productId: string;
// }
// interface AuthenticationProp {
//   productId: string;
//   dataSource: any;
//   configInfo?: {
//     username: string;
//     password: string;
//   };
// }
// const PasInput=(props:any)=>{
//   const { value,falsePassword,setVisible, setValue,setFaslePassword,visible,form } = props;
//   // const { value, setValue,visible,setVisible,form } = props;

//   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
//     if (!visible) {
//       // let reg=/[0-9a-zA-Z]/g
//       let nDot = /[^●]/g;
//       let index = -1;
//       let lastChar = '';
//       let realArr = value.password?.split('');
//       let coverArr = e.target.value.split('');
//       let coverLen = e.target.value.length;
//       let realLen = (value.password as string).length;

//       // 找到新输入的字符位置
//       coverArr.forEach((el: string, idx: number) => {
//         if (nDot.test(el)) {
//           index = idx;
//           lastChar = el;
//           console.log(index,lastChar);

//         }
//       });
//       if (realLen < coverLen) {
//         // 新增字符
//         // let pos = (document.getElementById('pwd') as HTMLInputElement)
//         //   .selectionEnd as number;
//         //   setPosition(pos)
//         //   if(pos<falsePassword.length){
//         //     (document.getElementById('pwd') as HTMLInputElement).setSelectionRange(pos,pos)
//         //   }
//         realArr?.splice(index, 0, lastChar);
//       } else if (coverLen <= realLen && index !== -1) {
//         realArr?.splice(index, realLen - (coverLen - 1), lastChar);
//       } else {
//         // 删除字符
//         // 获取光标的位置
//         let pos = (document.getElementById('pwd') as HTMLInputElement)
//           .selectionEnd as number;
//           console.log(pos);

//         realArr?.splice(pos, realLen - coverLen);
//       }

//       // setFalsePassword({...mqttForm,password:e.target.value.replace(/\S/g, "●")});

//       setValue({ ...value, password: realArr?.join('') });

//     } else {
//       setValue({ ...value, password: e.target.value });
//     }
//   };
//   return(
//     <Input
//         {...props}
//         onChange={handleChange}
//         placeholder="请输入密码"
//         suffix={
//           <div onClick={()=>{
//             setVisible(!visible);
//     if(!visible){
//       form.setFieldValue('password',value.password)
//     }else{
//       form.setFieldValue('password',falsePassword.password)
//     }
//           }}>
//             {visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />}
//           </div>
//         }
//       />
//   )
// }

// const Authentication: React.FC<AuthenticationProp> = ({
//   productId,
//   dataSource,
//   configInfo,
// }) => {
//   const columns = [
//     {
//       title: '类型',
//       dataIndex: 'name',
//       key: 'name',
//     },
//     {
//       title: '地址',
//       render: (record: any) => <Badge status="success" text={record.address} />,
//       key: 'address',
//     },
//   ];
//   const [form] = Form.useForm();
//   const { confirm } = Modal;
//   const [visible, setVisible] = useState(false);

//   const defaultMqttForm = {
//     username: `IOT_${productId}`,
//     password: 'yq88888888',
//   };
//   const [isReinstall, setIsReinstall] = useState(
//     configInfo?.username && configInfo?.password ? true : false,
//   ); //是否重置
//   const [mqttForm, setMqttForm] = useState(
//     isReinstall ? { ...configInfo } : { ...defaultMqttForm },
//   );
//   const [falsePassword, setFalsePassword] = useState(
//     // mqttForm.password?.replace(/\S/g, '●'),
//     {
//       ...mqttForm,
//       password:mqttForm.password?.replace(/\S/g, '●')
//     }
//   );
//   // const falsePassword={
//   //   ...mqttForm,
//   //     password:mqttForm.password?.replace(/\S/g, '●')
//   // }
//   const initialValues={
//     username: `IOT_${productId}`,
//     password: falsePassword.password,
//   }
//   const [position,setPosition]=useState(0)
//   let navigate = useNavigate();
//   const handlePassword = () => {
//     setVisible(!visible);
//     if(!visible){
//       form.setFieldValue('password',mqttForm.password)
//     }else{
//       form.setFieldValue('password',falsePassword.password)
//     }
//     // form.setFieldValue('password',!visible?mqttForm.password:falsePassword)
//   };
//   const onFinish = (value: any) => {
//     confirm({
//       title: '确定',
//       content: '确定保存嘛?',
//       onOk() {
//         console.log(value,mqttForm);
//         setIsReinstall(true);

//         navigate('../table', { replace: true });
//       },
//       onCancel() {
//         console.log('Cancel');
//       },
//     });
//   };

//   const handleChange = (e: any) => {
//     if (!visible) {
//       // let reg=/[0-9a-zA-Z]/g
//       let nDot = /[^●]/g;
//       let index = -1;
//       let lastChar = '';
//       let realArr = mqttForm.password?.split('');
//       let coverArr = e.target.value.split('');
//       let coverLen = e.target.value.length;
//       let realLen = (mqttForm.password as string).length;
//       const {selectionStart }=e.target
//       setPosition(selectionStart)

//       // 找到新输入的字符位置
//       coverArr.forEach((el: string, idx: number) => {
//         if (nDot.test(el)) {
//           index = idx;
//           lastChar = el;
//           console.log(index,lastChar);

//         }
//       });
//       if (realLen < coverLen) {
//         // 新增字符
//         let pos = (document.getElementById('pwd') as HTMLInputElement)
//           .selectionEnd as number;
//         //   setPosition(pos)
//         //   if(pos<falsePassword.length){
//         //     (document.getElementById('pwd') as HTMLInputElement).setSelectionRange(pos,pos)
//         //   }
//         setPosition(pos)
//         realArr?.splice(index, 0, lastChar);
//       } else if (coverLen <= realLen && index !== -1) {
//         realArr?.splice(index, realLen - (coverLen - 1), lastChar);
//       } else {
//         // 删除字符
//         // 获取光标的位置
//         let pos = (document.getElementById('pwd') as HTMLInputElement)
//           .selectionEnd as number;
//           console.log(pos);

//         realArr?.splice(pos, realLen - coverLen);
//       }

//       // setFalsePassword({...mqttForm,password:e.target.value.replace(/\S/g, "●")});
//       console.log(falsePassword);

//       setMqttForm({ ...mqttForm, password: realArr?.join('') });

//     } else {
//       setMqttForm({ ...mqttForm, password: e.target.value });
//     }
//   };
//   // useEffect(()=>{
//   //   console.log(mqttForm);

//   //   form.setFieldValue('password',falsePassword)
//   // },[falsePassword])
//   // useEffect(()=>{
//   //   console.log(position);
//   //     },[position])
//   //  useEffect(() => {
//   //   console.log(mqttForm);
//   //   form.setFieldValue('password',mqttForm.password)
//   // }, [mqttForm]);
//   return (
//     <div>
//       <section className={styles.linkInfo}>
//         <h1>连接信息</h1>
//         <Table dataSource={dataSource} columns={columns} pagination={false} />
//       </section>
//       <section className={styles.configInfo}>
//         <h1>MQTT认证配置</h1>
//         <div className={styles.mqttForm}>
//           <Form
//             form={form}
//             layout="vertical"
//             initialValues={initialValues}
//             onFinish={onFinish}
//             autoComplete="off"
//           >
//             <Form.Item
//               label="用户名"
//               name="username"
//               rules={[{ required: true, message: '用户名不能为空' }]}
//             >
//               <Input
//                 // value={mqttForm.username}
//                 disabled={isReinstall}
//                 placeholder="请输入用户名"
//                 // onChange={(e) => {
//                 //   setMqttForm({ ...mqttForm, username: e.target.value });
//                 // }}
//               />
//             </Form.Item>

//             <Form.Item
//               label="密码"
//               name="password"
//               rules={[{ required: true, message: '密码不能为空' }]}
//             >
//               {/* <Input
//                 suffix={
//                   <div onClick={handlePassword}>
//                     {visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />}
//                   </div>
//                 }
//                 id="pwd"
//                 onChange={handleChange}
//                 // value={visible ? mqttForm.password : falsePassword}
//                 disabled={isReinstall}
//                 placeholder="请输入密码"
//               /> */}
//               <PasInput value={mqttForm} setValue={setMqttForm} visible={visible} setVisible={setVisible} falsePassword={falsePassword} setFalsePassword={setFalsePassword} />
//             </Form.Item>
//             {isReinstall ? (
//               <Button type="primary" onClick={() => setIsReinstall(false)}>
//                 重新设置
//               </Button>
//             ) : (
//               <Form.Item>
//                 <Button type="primary" htmlType="submit">
//                   保存
//                 </Button>
//               </Form.Item>
//             )}
//           </Form>
//         </div>
//       </section>
//     </div>
//   );
// };

// const interConfigs: React.FC<interConfigsProp> = ({ productId }) => {
//   const id = productId ? productId : '8F687FA7';
//   const dataSource = [
//     {
//       key: '1',
//       name: 'tcp',
//       address: 'mqtt://mqtt.yqyjy.tech:1883',
//     },
//     {
//       key: '2',
//       name: 'ssl',
//       address: 'mqtts://mqtt.yqyjy.tech:8883',
//     },
//     {
//       key: '3',
//       name: 'ws',
//       address: 'ws://mqtt.yqyjy.tech:8083',
//     },
//     {
//       key: '4',
//       name: 'wss',
//       address: 'wss://mqtt.yqyjy.tech:8084',
//     },
//   ];

//   return (
//     <div className={styles.box}>
//       <div className={styles.left}>
//         <Authentication
//           productId={id}
//           dataSource={dataSource}
//           configInfo={{ username: '', password: '' }}
//         />
//       </div>
//     </div>
//   );
// };

// export default interConfigs;
